<script lang="ts" setup>
// 高级搜索
import dayjs from "dayjs";
import { useTaskStore } from "../store/index.ts";
const taskStore = useTaskStore()
const search_list = taskStore.search_obj_task

const show = ref(false)
//重置
const reset = () => {
    search_list.forEach(item => {
        item.value = ''
    })
}
const onSearch = () => {
    taskStore.search_task()
    reset()
    show.value = false
}
const typeList = ref([
    {
        label: '一般项目',
        value: '一般项目'
    },
    {
        label: '重要项目',
        value: '重要项目'
    }, {
        label: '关键项目',
        value: '关键项目'
    },

])
</script>

<template>
    <div class="w-full h-full" @click="show = true">
        高级搜索
    </div>

    <r-dialog v-model="show" :draggable="true" width="600" height="500">
        <template #header>
            高级搜索
        </template>

        <template #default>
            <div class="content" style="max-height: 250px;overflow: auto">
                <table v-for="(item, index) in search_list" :key="index">
                    <tr>
                        <td style="width: 20%;height: 50px;text-align: right">{{ item.label }}</td>
                        <td style="width: 80%">
                            <el-input v-if="item.label == '名称'" v-model="taskStore.search_Val.name" placeholder="关键词包含"
                                style="width: 370px;" />
                            <el-input v-if="item.label == '编号'" v-model="taskStore.search_Val.card" placeholder="关键词包含"
                                style="width: 370px;" />
                            <el-select v-if="item.label == '项目类型'" v-model="taskStore.search_Val.type" placeholder="请选择"
                                style="width: 370px;">
                                <el-option v-for="i in typeList" :key="i.value" :label="i.label" :value="i.value" />
                            </el-select>
                            <!-- <el-date-picker v-if="item.type == 'date'" v-model="item.value" type="daterange"> -->
                            <div v-if="item.type == 'date'">
                                <el-date-picker style="width: 40%;" 
                                    v-model="taskStore.search_Val.start_time" type="datetime" placeholder="" />
                                <span>至</span>
                                <el-date-picker style="width: 45%;"
                                    v-model="taskStore.search_Val.end_time" type="datetime" placeholder="" />
                            </div>
                            <!-- </el-date-picker> -->
                            <el-input v-if="item.label == '负责人'" v-model="taskStore.search_Val.user" placeholder="关键词包含"
                                style="width: 370px;" />
                            <el-input v-if="item.label == '执行人'" v-model="taskStore.search_Val.executor"
                                placeholder="关键词包含" style="width: 370px;" />
                        </td>
                    </tr>
                </table>
            </div>
        </template>

        <template #footer>
            <div class="flex justify-end items-center">
                <div class="text-[rgb(66,139,223)] m-2">
                    [<span class="cursor-pointer hover:underline" @click="reset">重置</span>]
                </div>
                <el-button type="success" @click="onSearch">搜索</el-button>
                <el-button @click="show = false">取消</el-button>
            </div>
        </template>
    </r-dialog>
</template>
<style scoped></style>